<template>
  <div class="test">
    <div class="test-item">
      <div class="question-header">
        <div class="question-title">
          {{question.exampageName}}
        </div>
        <div class="time">
          <div class="startandend" :class="screenWidth <=1080 ? 'none': 'block'">
            开始时间:{{question.startTime}}
            结束时间:{{question.endTime}}
            满分:{{question.score}}
          </div>
          <div class="setInterval" :class="screenWidth <=1080 ? 'text-align': ''">{{content}}</div>
        </div>
      </div>

      <div class="questions">
        <div class="topic">
          <div class="topic-item">
            <div>
              <h1>选择题</h1>
              <!--            单选-->
              <el-card class="box-card">
                <div>
                  <h2>单选</h2>
                  <div v-for="(item,index) in question.choice" :key="index" class="margin-bottom">
                    <div class="font-size" :id="'SingleChoice'+index">{{index+1}}、{{item.title}}</div>
                    <div class="display-flex margin-top-five">
                      <div v-for="(item,i) in item.items" class="display-flex-item ">
                        <el-radio v-model="SingleChoices[index]" :label="item.prefix"
                                  :name="item.content" class="font-size ddd"
                                  @change="SingleChoiceBtn(index)">{{item.prefix}}、{{item.content}}
                        </el-radio>
                      </div>
                    </div>

                  </div>
                </div>

                <!--            多选-->
                <div>
                  <h2>多选</h2>
                  <div v-for="(multChoice,index) in question.multChoices" class="margin-bottom">
                    <div class="font-size" :id="'MultipleChoice'+index">{{index+1}}、{{multChoice.title}}</div>
                    <div class="display-flex margin-top-five">
                      <div v-for="(item,i) in multChoice.items" class="display-flex-item">
                        <!--<el-checkbox v-model="item.checked" :label="item.prefix"-->
                        <el-checkbox v-model="item.checked" :label="item.prefix"
                                     :name="item.content"
                                     @change="MultipleChoiceBtn(index,i,item.prefix,item)">
                          {{item.prefix}}、{{item.content}}
                        </el-checkbox>
                      </div>
                    </div>
                  </div>
                </div>
              </el-card>

            </div>

            <div class="margin-top top">
              <h1>判断题</h1>
              <el-card class="box-card">
                <div v-for="(item,index) in question.judge" class="margin-bottom">
                  <div class="font-size" :id="'TrueFalse'+index">{{index+1}}、{{item.title}}</div>
                  <div class="display-flex margin-top-five">
                    <div v-for="(item,i) in item.items" class="display-flex-item">
                      <!--                <div>{{item.prefix}}.{{item.content}}</div>-->
                      <el-radio v-model="TrueFalses[index]" :label="item.prefix"
                                :name="item.content"
                                @change="TrueFalseBtn(index)">{{item.prefix}}、{{item.content}}
                      </el-radio>
                    </div>
                  </div>

                </div>
              </el-card>

            </div>

            <div class="margin-top top">
              <h1>填空题</h1>
              <el-card class="box-card">
                <div v-for="(item,index) in question.pack" class="margin-bottom">
                  <div class="font-size" :id="'GapFilling'+index">{{index+1}}、{{item.title}}</div>
                  <div class="input-item display-flex margin-top-five">
                    答:
                    <el-input v-model="GapFillings[index]" class="input" placeholder="请输入内容"
                              @input="GapFillingsBtn(index)"/>
                  </div>
                </div>
              </el-card>

            </div>

            <div class="margin-top top">
              <h1>简答题</h1>
              <el-card class="box-card">
                <div v-for="(item,index) in question.bigQuestions" class="margin-bottom">
                  <div class="font-size" :id="'ShortAnswer'+index">{{index+1}}、{{item.title}}</div>
                  <div class="textarea-item display-flex margin-top-five">
                    答:
                    <el-input type="textarea" placeholder="请输入内容" class="textarea" v-model="ShortAnswers[index]"
                              maxlength="500"
                              show-word-limit @input="ShortAnswersBtn(index)"/>
                  </div>
                </div>
              </el-card>

            </div>

            <div class="margin-left" :class="screenWidth <=1080 ? 'width': ''">
              <el-button type="primary" :class="screenWidth <=1080 ? 'btn-wthree': ''" size="medium" @click="submit">
                提交
              </el-button>
              <el-button type="success" :class="screenWidth <=1080 ? 'btn-wthree': ''" size="medium">保存</el-button>
              <el-button type="primary"
                         :class="(screenWidth <=1080||(screenWidth >1080 &&screenWidth <= 1800 ) )? 'block btn-wthree': 'none'"
                         size="medium"
                         @click="dialogVisible = true">答题卡
              </el-button>
            </div>
          </div>
        </div>

        <!--        答题卡-->
        <div class="sheet" :class="(screenWidth <=1080||(screenWidth >1080 &&screenWidth <= 1800 ))? 'none' : 'block'">
          <el-card class="box-card" shadow="always">
            <div class="font-size-fouth">答题卡</div>
            <div>
              <div class="font-size-fouth">单选</div>
              <div>
                <div v-for="(item,index) in allSingleChoices" class="text item">
                  <el-button size="mini" circle class="btn-width" :class="item !== '' ? ' btn-color' : '' ">
                    <a :href="'#SingleChoice'+index">{{index+1}}</a>
                  </el-button>
                  <!--                  {{item}}-->
                </div>

              </div>
            </div>
            <div>
              <div class="font-size-fouth">多选</div>
              <div>
                <div v-for="(item,index) in allMultipleChoice" class="text item">
                  <el-button size="mini" circle class="btn-width"
                             :class="(item[0] !== ''||item[1] !== ''||item[2] !== ''||item[3] !== '')? 'btn-color' : '' ">
                    <!--                    {{index+1}}-->
                    <a :href="'#MultipleChoice'+index">{{index+1}}</a>
                  </el-button>
                  <!--                  {{item}}-->
                </div>
              </div>
            </div>
            <div>
              <div class="font-size-fouth">判断</div>
              <div>
                <div v-for="(item,index) in allTrueFalses" class="text item">
                  <el-button size="mini" circle class="btn-width" :class="item !== '' ? ' btn-color' : '' ">
                    <!--                    {{index+1}}-->
                    <a :href="'#TrueFalse'+index">{{index+1}}</a>
                  </el-button>
                </div>
              </div>
            </div>
            <div>
              <div class="font-size-fouth">填空</div>
              <div>
                <div v-for="(item,index) in allGapFillings" class="text item">
                  <el-button size="mini" circle class="btn-width" :class="item !== '' ? ' btn-color' : '' ">
                    <!--                    {{index+1}}-->
                    <a :href="'#GapFilling'+index">{{index+1}}</a>
                  </el-button>
                </div>
              </div>
            </div>
            <div>
              <div class="font-size-fouth">简答</div>
              <div>
                <div v-for="(item,index) in allShortAnswers" class="text item">
                  <el-button size="mini" circle class="btn-width" :class="item !== '' ? ' btn-color' : '' ">
                    <!--                    {{index+1}}-->
                    <a :href="'#ShortAnswer'+index">{{index+1}}</a>
                  </el-button>
                </div>
              </div>
            </div>
          </el-card>
        </div>
      </div>
    </div>

    <!--    弹框答题卡-->
    <el-dialog title="答题卡" :visible.sync="dialogVisible" :before-close="handleClose"
               :class="(screenWidth <=1080||(screenWidth >1080 &&screenWidth <= 1800 ))? 'block dialog-width': 'none'"
               @close='handleClose'
               :close-on-click-modal="true">
      <div>
        <div class="font-size-fouth">单选</div>
        <div>
          <div v-for="(item,index) in allSingleChoices" class="text item">
            <!--            {{item}}-->
            <el-button size="mini" circle class="btn-width" :class="item !== '' ? ' btn-color' : '' ">
              <a :href="'#SingleChoice'+index" @click="dialogVisible = false">{{index+1}}</a>
            </el-button>
          </div>
        </div>
      </div>
      <div>
        <div class="font-size-fouth">多选</div>
        <div>
          <div v-for="(item,index) in allMultipleChoice" class="text item">
            <el-button size="mini" circle class="btn-width"
                       :class="(item[0] !== ''||item[1] !== ''||item[2] !== ''||item[3] !== '')? 'btn-color' : '' ">
              <a :href="'#MultipleChoice'+index" @click="dialogVisible = false">{{index+1}}</a>
            </el-button>
          </div>
        </div>
      </div>
      <div>
        <div class="font-size-fouth">判断</div>
        <div>
          <div v-for="(item,index) in allTrueFalses" class="text item">
            <el-button size="mini" circle class="btn-width" :class="item !== '' ? ' btn-color' : '' ">
              <a :href="'#TrueFalse'+index" @click="dialogVisible = false">{{index+1}}</a>
            </el-button>
          </div>
        </div>
      </div>
      <div>
        <div class="font-size-fouth">填空</div>
        <div>
          <div v-for="(item,index) in allGapFillings" class="text item">
            <el-button size="mini" circle class="btn-width" :class="item !== '' ? ' btn-color' : '' ">
              <a :href="'#GapFilling'+index" @click="dialogVisible = false">{{index+1}}</a>
            </el-button>
          </div>
        </div>
      </div>
      <div>
        <div class="font-size-fouth">简答</div>
        <div>
          <div v-for="(item,index) in allShortAnswers" class="text item">
            <el-button size="mini" circle class="btn-width" :class="item !== '' ? ' btn-color' : '' ">
              <a :href="'#ShortAnswer'+index" @click="dialogVisible = false">{{index+1}}</a>
            </el-button>
          </div>
        </div>
      </div>
    </el-dialog>

    <div class="t" @click="trues"></div>
    <div class="trues" :class="sss === 0 ? 'none':'block'">吃的吃大餐的从差点迟到</div>
  </div>
</template>

<script>
  import {GetExampageById, GetAreTheExam, GetAnswer, SubmitAnswer,SaveAnswer} from "../../api/index"
  import setDate from "../../utils/date"
  import AnswerSheet from "../../utils/AnswerSheet"

  export default {
    name: "test",
    data() {
      return {
        examId:undefined,
        question: {},
        hour: 12,
        minute: 60,
        second: 60,
        clock: undefined,
        content: "",
        //选择题
        //单选
        SingleChoices: [],
        allSingleChoices: [],
        //多选
        allMultipleChoice: [],
        //判断
        TrueFalses: [],
        allTrueFalses: [],
        //填空
        GapFillings: [],
        allGapFillings: [],
        //简答
        ShortAnswers: [],
        allShortAnswers: [],
        //屏幕宽度
        screenWidth: 0,
        dialogVisible: false,
        //按键编码
        key: 0,
        sss: 0,
        //答题卡
        answerSheet: {},
        AnswerContext:{},
      }
    },
    methods: {
      async getQuestion() {
        this.examId = this.$route.query.question;
        await GetExampageById({id: this.$route.query.question}).then((res) => {
          this.question = res.data.examPage
        }).catch((err) => {
          console.log(err);
        });
        this.setArrays();//初始化二位数组
        // //初始化一维数组
        this.allSingleChoices = [...this.setArray(this.question.choice)];
        this.allTrueFalses = [...this.setArray(this.question.judge)];
        this.allGapFillings = [...this.setArray(this.question.pack)];
        this.allShortAnswers = [...this.setArray(this.question.bigQuestions)];
        const start = setDate({time: this.question.startTime});
        const end = setDate({time: this.question.endTime});
        this.question.startTime = start;
        this.question.endTime = end;
        let split1 = this.setTime(start);
        let split2 = this.setTime(end);
        this.subtract(split1, split2);
      },

      setArrays() {//设置二维数组
        for (let i in this.question.multChoices) {
          this.allMultipleChoice[i] = new Array();
          for (let j in this.question.multChoices[i].items) {
            this.allMultipleChoice[i][j] = ""
          }
        }
      },

      setArray(arr) {//设置所有的一维数组
        let array = new Array();
        for (let i in arr) {
          array[i] = ""
        }
        return array;
      },

      //两个时间相减
      subtract(split1, split2) {
        let split_one = split1.split(":");
        let split_two = split2.split(":");
        let hou = split_two[0] - split_one[0];
        let min = split_two[1] - split_one[1];
        let sec = split_two[2] - split_one[2];
        this.hour = hou;
        this.minute = min;
        this.second = sec;
        this.countdown()
      },

      countdown() {
        this.clock = setInterval(() => { //倒计时
          this.content = this.hour + ":" + this.minute + ":" + (this.second = ((this.second >= 1 && this.second < 10) ? "0" + this.second : this.second));
          if (this.hour >= 0) {
            if (this.second === 0) {
              this.second = 60;
              if (this.minute === 0) {
                this.minute = 60;
                this.hour--;
              }
              this.minute--;
            }
            this.second--;
          } else if (this.hour < 0 && this.minute < 0) {
            if (this.second >= 1) { //当倒计时小于0时清除定时器
              clearInterval(this.clock)
            }
          }
        }, 1000)
      },

      //截取小时
      setTime(time) {
        return time.split(" ")[1];
      },

      SingleChoiceBtn(index) {//单选
        this.allSingleChoices[index] = this.SingleChoices[index];
        // console.log(this.allSingleChoices);
        this.packAnswer();
        console.log(this.AnswerContext);
        this.saveAnswer();
      },

      MultipleChoiceBtn(index, i, prefix, item) {//多选
        let multipleChoice = this.question.multChoices;
        for (let m in multipleChoice) {
          if (m == index) {
            for (let n in multipleChoice[index].items) {
              if (n == i) {
                if (item.checked === true) {
                  this.allMultipleChoice[index][i] = multipleChoice[index].items[i].prefix;
                } else {
                  this.allMultipleChoice[index][i] = "";
                }
              }
            }
          }
        }
      },

      TrueFalseBtn(index) {//判断
        this.allTrueFalses[index] = this.TrueFalses[index];
        // console.log(this.allTrueFalses);
      },

      GapFillingsBtn(index) {//填空
        this.allGapFillings[index] = this.GapFillings[index];
        // console.log(this.allGapFillings);
      },

      ShortAnswersBtn(index) {//简答
        this.allShortAnswers[index] = this.ShortAnswers[index];
        // console.log(this.allShortAnswers);
      },

      // 封装答题卡
      packAnswer() {

        const choice={};
        const multChoices={};
        const judge={};
        const pack={};
        const bigQuestions={};


        console.log(this.question);
        const questions = this.question;

        for (let i = 0; i < questions.choice.length; i++) {//单选
          let key = questions.choice[i].id;
          let val = {"analyze": "", "correctArray": [this.allSingleChoices[i]], "score": ""};
          choice[key] = val;
        }

        for (let i = 0; i < questions.multChoices.length; i++) {//多选
          let key = questions.multChoices[i].id;
          let val = {"analyze": "", "correctArray": [...this.allMultipleChoice[i]], "score": ""};
          multChoices[key] = val;
        }

        for (let i = 0; i < questions.judge.length; i++) {//判断
          let key = questions.judge[i].id;
          let val = {"analyze": "", "correctArray": [this.allTrueFalses[i]], "score": ""};
          judge[key] = val;
        }

        for (let i = 0; i < questions.pack.length; i++) {//填空
          let key = questions.pack[i].id;
          let val = {"analyze": this.allGapFillings[i], "correctArray": [], "score": ""};
          pack[key] = val;
        }

        for (let i = 0; i < questions.bigQuestions.length; i++) {//简答
          let key = questions.bigQuestions[i].id;
          let val = {"analyze": this.allShortAnswers[i], "correctArray": [], "score": ""};
          bigQuestions[key] = val;
        }
        this.AnswerContext = {choice,multChoices,judge,pack,bigQuestions,userId:this.answerSheet.userId,answerId:this.answerSheet.answerId,exampageId:this.answerSheet.exampageId};
        //console.log(this.AnswerContext );
        },

      // 提交答题卡
      async submit() {
        // AnswerSheet.choice.additionalProperties1.correctArray = [...this.allSingleChoices];//单选
        // AnswerSheet.multChoices.additionalProperties1.correctArray = [...this.allMultipleChoice];
        // AnswerSheet.judge.additionalProperties1.correctArray = [...this.allTrueFalses];
        // AnswerSheet.pack.additionalProperties1.correctArray = [...this.allGapFillings];
        // AnswerSheet.bigQuestions.additionalProperties1.correctArray = [...this.allShortAnswers];//简答
        // this.answerSheet.choice =AnswerSheet.choice;
        // this.answerSheet.multChoices = AnswerSheet.multChoices;
        // this.answerSheet.judge = AnswerSheet.judge;
        // this.answerSheet.pack = AnswerSheet.pack;
        // this.answerSheet.bigQuestions = AnswerSheet.bigQuestions;
        // console.log(this.answerSheet);
        // await SubmitAnswer({obj: this.answerSheet}).then((res) => {
        //   console.log(res);
        // }).catch((err) => {
        //   console.log(err);
        // })
        /*var AnswerSheet = {
          "bigQuestions": [],
          "bigQuestionsScore": 0,
          "choice": [],
          "exampageId": 0,
          "judge": [],
          "multChoices": [],
          "otherScore": 0,
          "pack": [],
          "answerId": 0,
          "userId": 0,
          "score": null,
          "status": -1,
        };*/
        // let user={};
        // user["userId"]={"userId":this.answerSheet.userId};
        // AnswerSheet.userId = {"userId":this.answerSheet.userId};
        // AnswerSheet.userId = this.answerSheet.userId;
        // AnswerSheet.answerId = this.answerSheet.answerId;
        // AnswerSheet.exampageId = this.answerSheet.exampageId;
        // console.log(AnswerSheet);
        //console.log(choice, multChoices, judge, pack, bigQuestions, this.answerSheet.userId, this.answerSheet.answerId, this.answerSheet.exampageId);
        this.packAnswer();
        await SubmitAnswer({AnswerContext:this.AnswerContext}).then((res) => {
          console.log(res);
        }).catch((err) => {
          console.log(err);
        })
      },

      // 缓存答题卡
      async saveAnswer() {
        // 1. 封装答题卡
        this.packAnswer();
        // 2. 缓存到localstorage
        localStorage.setItem(this.answerSheet.userId +'-'+ this.answerSheet.answerId+'-'+this.answerSheet.exampageId + "AnswerContext",this.AnswerContext);

        // 3. 调用接口缓存到redis
        await SaveAnswer({AnswerContext:this.AnswerContext});
      },

      // 获取初始化答题卡
      initAnswer() {
        // console.log(1);
        // const obj = localStorage.getItem(this.answerSheet.userId +'-'+ this.answerSheet.answerId+'-'+this.answerSheet.exampageId + "AnswerContext");
        // if (obj != null) {
        //   console.log(obj);
        //     this.AnswerContext = obj;
        // } else {
        //   console.log(3);
        //   // await this.queryAnswer();
        //
        // }
        console.log(this.answerSheet);
        const answerContent = this.answerSheet;
        if (answerContent && answerContent !== '') {
          this.AnswerContext = answerContent;
        } else {
          this.packAnswer();
        }
        this.transform();
      },

      // 将答题卡转换为能显示到页面的状态
      transform() {
        console.log(123+"---------------");
        const AnswerContext = this.AnswerContext;


          console.log(this.AnswerContext);
          // 单选
          this.question.choice.forEach(cho => {
            //let index = 0;
            this.allSingleChoices = [];
            //console.log(AnswerContext.choice[cho.id]);
            if (AnswerContext.choice[cho.id] && AnswerContext.choice[cho.id].correctArray) {
              AnswerContext.choice[cho.id].correctArray.forEach((ca) => {
                if (ca && ca !== '') {
                  this.SingleChoices.push(ca);
                  this.allSingleChoices.push(ca);
                }
              })
            }
          })
          // 多选
          this.question.multChoices.forEach(cho => {
            let index = 0;
            this.allMultipleChoice[index] = [];
            let j = 0
            if (AnswerContext.multChoices[cho.id] && AnswerContext.multChoices[cho.id].correctArray) {
              AnswerContext.multChoices[cho.id].correctArray.forEach(ca => {
                if (ca === cho.items[j].prefix) {
                  cho.items[j].checked = true;
                }
                this.allMultipleChoice[index].push(ca);
                j++;
              })
            }

          })
          // 判断
          this.question.judge.forEach(cho => {
            this.allTrueFalses = [];
            if (AnswerContext.judge[cho.id] && AnswerContext.judge[cho.id].correctArray) {
              AnswerContext.judge[cho.id].correctArray.forEach(ca => {
                if (ca && ca !== '') {
                  this.TrueFalses.push(ca);
                  this.allTrueFalses.push(ca);
                }
              })
            }

          })
          // 填空
          this.allGapFillings = [];
          this.question.pack.forEach(cho => {
            if (AnswerContext.pack[cho.id] && AnswerContext.pack[cho.id].analyze) {
              const ca = AnswerContext.pack[cho.id].analyze;
              this.GapFillings.push(ca);
              this.allGapFillings.push(ca);
            }

          })
          // 大题
          this.allShortAnswers = [];
          this.question.bigQuestions.forEach(cho => {
            if (AnswerContext.bigQuestions[cho.id] && AnswerContext.bigQuestions[cho.id].analyze) {
              const ca = AnswerContext.bigQuestions[cho.id].analyze;
              this.ShortAnswers.push(ca);
              this.allShortAnswers.push(ca);
            }

          })


      },

      handleClose() {
        this.dialogVisible = false;
      },

      trues() {
        this.key++;
      },
      cleanArray() {
        //选择题
        //单选
        this.SingleChoices = [];
        this.allSingleChoices = [];
        //多选
        this.allMultipleChoice = [];
        //判断
        this.TrueFalses = [];
        this.allTrueFalses = [];
        //填空
        this.GapFillings = [];
        this.allGapFillings = [];
        //简答
        this.ShortAnswers = [];
        this.allShortAnswers = [];
      },
      async getAreTheExam() {
        // console.log(this.$store.state.user.userId);
        const res = await GetAreTheExam({examId: this.$route.query.question, userId: this.$store.state.user.userId})
        console.log(res);
        const res2 = await GetAnswer({answerId: res.data.answerVO.answerId});
        console.log(res2.data.answerVO);
        this.answerSheet = res2.data.answerVO;
        //console.log(this.answerSheet);
      },
    },
    async created() {
      this.cleanArray();
      this.getQuestion();
      await this.getAreTheExam();
      await this.initAnswer();
    },
    mounted() {
      this.screenWidth = document.body.clientWidth;
      // this.screenHeight = document.body.clientHeight;
      window.onresize = () => {
        return (() => {
          this.screenWidth = document.body.clientWidth;
          // this.screenHeight = document.body.clientHeight;
        })();
      };
      // console.log("mounted" + document.body.clientWidth);
      // console.log(document.body.clientHeight);
    },
    watch: {
      screenWidth: {
        handler: (newVal, oldVal) => {
          // console.log("watch" + newVal);
        }
      },
      key: {
        handler(newVal, oldVal) {
          console.log(newVal);
          if (newVal >= 10 && newVal <= 13) {
            this.sss = 1;
            if (newVal === 13) {
              this.key = 0;
            }
          } else {
            this.sss = 0;
          }
        }
      }
    }
  }
</script>

<style scoped>

  .test {
    width: 100%;
  }

  .test-item {

  }

  .question-header {
    font-size: 20px;
    text-align: center;
  }

  .question-title {
    font-size: 30px;
    margin-bottom: 20px;
  }


  .time, .questions {
    display: flex;
    flex-direction: row;
  }

  .setInterval {
    width: 10%;
  }

  .startandend {
    width: 100%;
  }

  .topic {
    width: 80%;
  }

  .sheet {
    width: 18%;
    position: fixed;
    right: 60px;
    background-color: #fafafa;
    top: 190px;
  }

  .text {
    font-size: 20px;
    padding: 18px 0;
    display: inline-block;
  }

  .btn-width {
    width: 35%;
  }

  .item {
    width: 20%;
  }

  .font-size-fouth {
    font-size: 20px;
  }

  .topic-item {
    width: 80%;
    margin-left: 17%;
  }

  .display-flex {
    display: flex;
    flex-direction: row;
  }

  .display-flex-item {
    width: 25%;
    font-size: 20px;
  }

  .margin-bottom {
    margin-bottom: 2%;
  }

  .margin-top-five {
    margin-top: 1%;
  }

  .input {
    width: 20%;
  }

  .textarea {
    width: 50%;
  }

  .font-size {
    font-size: 20px;
  }

  .top {
    margin-top: 3%;
  }

  h2 {
    margin-bottom: 1%;
  }

  .margin-left {
    margin-top: 3%;
    margin-bottom: 5%;
    margin-left: 40%;
  }

  a {
    text-decoration: none;
    color: #444444;
  }

  /deep/ .el-radio__label, /deep/ .el-checkbox__label {
    font-size: 18px !important;
    text-align: center;
  }

  .block {
    display: block;
  }

  .none {
    display: none;
  }

  .width {
    width: 100%;
    margin-left: 20%;
  }

  .btn-wthree {
    display: inline-block;
  }

  .text-align {
    text-align: center;
    width: 100%;
  }

  .dialog-width {
    width: 150%;
    margin-left: -25%;
  }

  .btn-color {
    background-color: #42b983;
  }


  @media screen and (max-width: 1080px) {
    .question-title {
      font-size: 23px;
      font-weight: 600;
    }

    h1 {
      font-size: 20px;
    }

    h1, .box-card {
      margin-left: -23%;
    }

    .font-size {
      font-size: 16px;
    }

    .box-card {
      width: 160%;
      margin-bottom: 10%;
    }

    /deep/ .el-radio__label, /deep/ .el-checkbox__label {
      font-size: 15px !important;
    }
  }

  @media screen and (min-width: 1080px) and (max-width: 1800px) {

    .test {
      width: 80%;
    }

    .question-title {
      font-size: 23px;
      font-weight: 600;
    }

    h1 {
      font-size: 20px;
    }

    h1, .box-card {
      margin-left: -23%;
    }

    .font-size {
      font-size: 16px;
    }

    .box-card {
      width: 200%;
      margin-bottom: 10%;
    }

    /deep/ .el-radio__label, /deep/ .el-checkbox__label {
      font-size: 15px !important;
    }

    .dialog-width {
      width: 60%;
      margin-left: 20%;
    }
  }

  .trues {
    position: fixed;
    bottom: 10px;
    left: 10px;
    width: 20%;
    height: 100px;
  }

  .t {
    position: fixed;
    bottom: 1px;
    left: 1px;
    background-color: #e9e9e9;
    width: 20px;
    height: 20px;
  }

</style>
